<template>
  <div style="padding-top:100px">
    <div class="app-title-container title-position">
      <modules-title titleName="样品销毁">
        <template slot="btn">
          <el-button class="filter-item" type="primary" size="small"
           v-hasPermi="{v:['destruction:add']}"
                     @click="handleAdd">创建销毁申请
          </el-button>
        </template>
      </modules-title>
    </div>
    <div style="padding:20px">
      <el-tabs type="border-card" v-model="activeIndex" @tab-click="handleClick">
        <!--搜索-->
        <el-form :inline="true">
          <el-form-item label="状态" v-if="activeIndex === '1'">
            <el-select v-model="queryParams.status" @change="handlStatus" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="创建人" v-if="activeIndex === '1'">
            <el-select v-model="queryParams.creator_id" @change="handlCreatoe" placeholder="请选择">
              <el-option v-for="item in searchList" :key="item.value" :label="item.creator_name"
                         :value="item.creator_id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="操作人" v-if="activeIndex === '2'">
            <el-select v-model="queryParams.destroy_user_id" @change="handlDestroy" placeholder="请选择">
              <el-option v-for="item in destroyList" :key="item.value"
                         :label="item.destroy_user_name" :value="item.destroy_user_id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="所属项目" v-if="activeIndex === '2'">
            <el-select v-model="queryParams.project_id" @change="handlProject"  placeholder="请选择">
              <el-option v-for="item in projectList" :key="item.value" :label="item.project_name"
                         :value="item.project_id"/>
            </el-select>
          </el-form-item>
          <el-form-item :label="label">
            <el-date-picker style="width: 270px" @input="handlDate" v-model="value" type="daterange"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="样品关键字">
            <el-input v-model="queryParams.select_str" placeholder="请输入样品关键字"/>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item" type="primary"  size="small"
                       @click="handleQuery">查询
            </el-button>
            <el-button plain  @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-tab-pane label="销毁申请" name="1">
          <apply :tableApply="tableApply" :options="options" @handTable="handTable"/>
        </el-tab-pane>
        <el-tab-pane label="销毁明细" name="2">
          <particular :tableParticular="tableParticular" :options="options"/>
        </el-tab-pane>
        <!--页码-->
        <pagination style="display:flex;justify-content:flex-end;" :total="total"
                    :page.sync="queryParams.pager.skip" :limit.sync="queryParams.pager.limit"
                    @pagination="pagination"/>
      </el-tabs>
    </div>

  </div>
</template>

<script>
  import {
    sampleList,
    sampleAll,
    sampleAllProject,
    sampleDestroy,
    destroyUse
  } from '@/api/sampleManagement'

  export default {
    name: 'index',
    components: {
      apply: () => import('../component/apply'),
      particular: () => import('../component/particular')
    },
    data() {
      return {
        value: [],
        activeIndex: '1',
        queryParams: {
          status: -1, //  -1 全部 0 审批中  1 已拒绝  2 待销毁  3 销毁确认 4 已销毁
          creator_id: '', //创建人id
          start_time: '', //创建开始时间  "2020-10-12 00:00:00"
          end_time: '', //创建结束时间
          select_str: '', //模糊搜索  样品名称  单号
          project_id: '', //项目id
          destroy_user_name: '',
          pager: {
            limit: 10,
            skip: 1
          }
        },
        options: [
          { value: -1, label: '全部' },
          { value: 0, label: '审批中' },
          { value: 1, label: '已拒绝' },
          { value: 2, label: '待销毁' },
          { value: 3, label: '销毁确认' },
          { value: 4, label: '已销毁' },
          { value: 5, label: '已撤销' },
          { value: 6, label: '已回退' },
        ],
        tableApply: [], //销毁申请
        tableParticular: [{ name: '看美女呢' }], //销毁明细
        total: 0,
        searchList: [],
        projectList: [],
        destroyList: [],
        label: '创建时间'
      }
    },

    //属性是手动定义的所需监听的值
    watch: {},

    beforeRouteEnter(to,from,next){
      to.params.refresh = from.params.refresh
      next()
    },
    activated(){
      if (this.$route.params.refresh){
        this.handleClick()
      }
    },

    //生命周期 - 创建完成（访问当前this实例）
    created() {
      this.handleClick()
      this.handlSampleAll()
      this.handlSampleAllProject()
      this.handlDestroyUse()
    },

    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },

    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      //创建销毁申请
      handleAdd() {
        this.$router.push('/sampleManagement/destruction/create')
      },

      //时间事件
      handlDate(val) {
        if (val === null) {
          this.queryParams.start_time = ''
          this.queryParams.end_time = ''
        } else {
          this.queryParams.start_time = this.dateFormat1(
            'yyyy-mm-dd 00:00:00',
            val[0]
          )
          this.queryParams.end_time = this.dateFormat1(
            'yyyy-mm-dd 23:59:59',
            val[1]
          )
        }
        this.queryParams.pager.skip = 1
        if (this.activeIndex === '1') {
          this.handlSampleList()
        } else {
          this.handlSampleDestroy()
        }

      },

      //切换tabs
      handleClick() {
        if (this.activeIndex === '1') {
          this.label = '创建时间'
          this.handlSampleList()
        } else {
          this.label = '销毁时间'
          this.handlSampleDestroy()
        }
        this.resetQuery()
      },

      //销毁申请列表
      handlSampleList() {
        sampleList(this.queryParams).then(res => {
          if (res.code === 200) {
            this.tableApply = res.data.data || []
            this.total = res.data.total
          }
        })
      },

      //销毁明细列表
      handlSampleDestroy() {
        sampleDestroy(this.queryParams).then(res => {
          if (res.code === 200) {
            this.tableParticular = res.data.data || []
            this.total = res.data.total
          }
        })
      },

      //获取创建人
      handlSampleAll() {
        sampleAll().then(res => {
          if (res.code === 200) {
            this.searchList = res.data
          }
        })
      },

      //获取项目
      handlSampleAllProject() {
        sampleAllProject().then(res => {
          if (res.code === 200) {
            this.projectList = res.data
          }
        })
      },

      //获取操作人
      handlDestroyUse() {
        destroyUse().then(res => {
          if (res.code === 200) {
            this.destroyList = res.data
          }
        })
      },

      //确认方法
      handTable() {
        this.handlSampleList()
      },

      //页码
      pagination(val) {
        this.queryParams.pager.skip = val.page
        this.queryParams.pager.limit = val.limit
        if (this.activeIndex === '1') {
          this.handlSampleList()
        } else {
          this.handlSampleDestroy()
        }
      },

      handlStatus(val){
        this.queryParams.status = val
        this.queryParams.pager.skip = 1
        if (this.activeIndex === '1') {
          this.handlSampleList()
        } else {
          this.handlSampleDestroy()
        }
      },

      handlCreatoe(val){
        this.queryParams.creator_id = val
        this.queryParams.pager.skip = 1
        if (this.activeIndex === '1') {
          this.handlSampleList()
        } else {
          this.handlSampleDestroy()
        }
      },

      handlDestroy(val){
        this.queryParams.destroy_user_id = val
        this.queryParams.pager.skip = 1
        if (this.activeIndex === '1') {
          this.handlSampleList()
        } else {
          this.handlSampleDestroy()
        }
      },

      handlProject(val){
        this.queryParams.project_id = val
        this.queryParams.pager.skip = 1
        if (this.activeIndex === '1') {
          this.handlSampleList()
        } else {
          this.handlSampleDestroy()
        }
      },

      //查询
      handleQuery() {
        this.queryParams.pager.skip = 1
        if (this.activeIndex === '1') {
          this.handlSampleList()
        } else {
          this.handlSampleDestroy()
        }
      },

      //重置
      resetQuery() {
        this.value = []
        this.queryParams = {
          status: -1, //  -1 全部 0 审批中  1 已拒绝  2 待销毁  3 销毁确认 4 已销毁
          creator_id: '', //创建人id
          start_time: '', //创建开始时间  "2020-10-12 00:00:00"
          end_time: '', //创建结束时间
          select_str: '', //模糊搜索  样品名称  单号
          project_id: '', //项目id
          destroy_user_name: '',
          pager: {
            limit: 10,
            skip: 1
          }
        }
        if (this.activeIndex === '1') {
          this.handlSampleList()
        } else {
          this.handlSampleDestroy()
        }
      }
    }
  }
</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
